<template>
	<view class="store-info-container bg-white e-flex" v-if="storeInfo">
		<load-image size="148rpx" :src="storeInfo.logo">
		</load-image>
		<view class="e-flex-1 e-m-l-20 e-m-r-10">
			<view class="e-font-28 c-333 fw-600 e-m-b-16">
				{{storeInfo.name}}
			</view>
			<view class="e-flex e-m-b-18">
				<view class="e-m-r-20 e-font-26 e-flex" style="color: #F86914;">
					<text class="e-m-r-6">{{storeInfo.averageScore}}</text>
					<text>{{$t('nearby.分')}}</text>
				</view>
				<view class="e-font-24 c-secondary e-flex">
					<text class="e-m-r-6">{{storeInfo.evaluateCount}}</text>
					<text>{{$t('nearby.条评价')}}</text>
				</view>
			</view>
			<view class="c-333 e-font-24" v-if="$isEnglishVersion">
				<view>{{$t('nearby.营业时间')}}：</view>
				<view>{{storeInfo.beginTime}}-{{storeInfo.endingTime}}</view>
			</view>
			<view class="c-333 e-font-24 e-flex" v-else>
				<text>{{$t('nearby.营业时间')}}：</text>
				<text>{{storeInfo.beginTime}}-{{storeInfo.endingTime}}</text>
			</view>
		</view>
		<view class="e-flex ">
			<view class="e-m-r-32" @tap="navigation">
				<view class="e-flex-xy-center">
					<image src="/static/nearby/navigation1.png" class=" img-48"></image>
				</view>
				<view class="text-center e-font-22">
					{{$t('nearby.导航')}}
				</view>
			</view>
			<view @tap="call">
				<view class="e-flex-xy-center">
					<image src="/pages/systemPay/static/phone.png" class="img-48"></image>
				</view>
				<view class="text-center e-font-22">
					{{$t('nearby.联系商家')}}
				</view>
			</view>

		</view>
	</view>
</template>

<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>

<script setup lang="ts">
	import { useNavigation } from '@/common/hooks'
	import type { NearbyStoreInfo } from '@/common/request/api'

	const props = defineProps<{
		storeInfo : NearbyStoreInfo
	}>()


	const { openNavigation } = useNavigation()

	const call = () => {
		uni.makePhoneCall({
			phoneNumber: props.storeInfo.shopkeeperTelephone //仅为示例
		})
	}

	const navigation = () => {
		openNavigation({
			location: props.storeInfo.location?.split?.(',')||[],
			title: props.storeInfo.name
		})
	}
</script>

<style lang="scss" scoped>
	.store-info-container {
		padding: 20rpx 20rpx 20rpx 30rpx;
		border-radius: 20rpx;
	}
</style>